import {createFileRoute} from '@tanstack/react-router'
import {useMemo, useState} from 'react';
import {OnClickElement} from '../floors/types.ts';

import List from '../5_list.ts'


export const Route = createFileRoute('/floors/$floorNumber')({
    component: FloorNumber
})

function FloorNumber() {
    const [checked, setChecked] = useState([] as string [])

    const dict = useMemo(() => {
        return new Set<string>()
    }, [])

    const onClickElement: OnClickElement = (elementId) => {
        dict.has(elementId) ? dict.delete(elementId) : dict.add(elementId)
        setChecked(Array.from(dict))
    }

    return <div>
        <div>
            selected: {checked.join(', ')}
        </div>
        <List cb={onClickElement}/>
    </div>
}
